<template>
  <div class="beauty-section" :class="showBeautyBox ? 'aniIn' : 'aniOut'">
    <div class="beauty-header" v-show="showBeautyBox" @click="handleBack">
      <a-icon type="arrow-left" />
      <span>组件美化</span>
    </div>
    <div class="beauty-content">
      <!-- 组价美化插槽 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    showBeautyBox: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  watch: {},
  mounted() {},
  computed: {},
  methods: {
    handleBack() {
      this.$emit("handleBack");
    },
  },
};
</script>

<style lang="scss" scoped>
.beauty-section {
  width: 100%;
  height: calc(100vh - 54px);
  position: absolute;
  right: -276px;
  top: 0;
  z-index: 100;
  transition: all 0.2s;
  background-color: #ffffff;
  padding-top: 49px;
  display: flex;
  flex-direction: column;

  .beauty-header {
    width: 276px;
    height: 48px;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 14px 24px;
    font-weight: 600;
    color: #000000;
    border-bottom: 1px solid #f0f2f5;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    span {
      margin-left: 10px;
      cursor: pointer;
      user-select: none;
    }
  }
  .beauty-content {
    width: 228px;
    flex: 1;
    background: #ffffff;
    margin: 0 auto;
    text-align: center;
    overflow-y: scroll;
  }
  .beauty-content::-webkit-scrollbar {
    width: 0;
  }
}
.aniIn {
  right: 0;
}
.aniOut {
  right: -276px;
}
</style>
